<?php get_header(); ?>
<!-- 首页内容开始 -->
<div id="home_main" class="main">
	<div class="part1 am-padding-vertical-xl">
		<div class="am-g am-g-fixed am-padding-vertical-xl">
			<div class="am-u-md-6 am-padding-0"><img src="<?php echo get_template_directory_uri(); ?>/assets/imgs/home_1.png"></div>
			<div class="am-u-md-6">
				<h3 class="am-margin-0 am-text-xxxl yu-text-normal">有<span class="am-padding-horizontal-xs yu-color-white">"响站"</span>更成功！</h3>
				<p class="am-text-xl am-margin-top-0 am-margin-bottom">在三像素做响站，更好、更快、更省</p>
				<p class="am-margin-0">pc网站、手机网站、微站三合一，助力企业全网获利。</p>
				<p class="am-margin-vertical-xs"><a href="" class="am-btn am-btn am-btn-warning">了解响应式网站</a></p>
			</div>
			<div class="am-cf"></div>
		</div>
	</div>
	<div class="part2 am-padding-vertical-xl">
		<div class="am-g am-g-fixed">
			<h3 class="title am-text-center am-text-xl am-margin-bottom-0 yu-text-normal">为什么选择三像素?</h3>
			<p class="title am-margin-top-0 am-margin-bottom-lg am-text-center am-text-lg yu-text-normal">Why choose us?</p>
			<div class="am-u-md-4 am-text-sm am-text-center">
				<p class="am-padding-hosizental-lg am-margin-bottom-xs"><img src="<?php echo get_template_directory_uri(); ?>/assets/imgs/home_icon_1.png"></p>
				<p>PC/手机/微信网站 一建三雕 简单易用，</br>零技术上手，精美网页30分钟轻松拥有，做企业站、个人站、网店商城、手机微信站，样样行</p>
			</div>
			<div class="am-u-md-4 am-text-sm am-text-center">
				<p class="am-padding-hosizental-lg am-margin-bottom-xs"><img src="<?php echo get_template_directory_uri(); ?>/assets/imgs/home_icon_2.png"></p>
				<p>首创三站模块化布局个性DIY</br>任意排版布局，模块插件如堆积木，随意叠加，自由拖动；无拘无束潇洒构建任何风格网站</p>
			</div>
			<div class="am-u-md-4 am-text-sm am-text-center">
				<p class="am-padding-hosizental-lg am-margin-bottom-xs"><img src="<?php echo get_template_directory_uri(); ?>/assets/imgs/home_icon_3.png"></p>
				<p>支持友好SEO优化</br>提供快捷的SEO功能，有效提升网站的收录和排名支持局SEO，SEO设定so easy!</p>
			</div>
			<div class="am-cf"></div>
		</div>
	</div>

	<div class="part3 am-padding-vertical-xl">
		<div class="am-g am-g-fixed">
			<h3 class="title am-text-center am-text-xl am-margin-bottom-0 yu-text-normal">PC端作品</h3>
			<p class="title am-margin-top-0 am-margin-bottom-lg am-text-center am-text-lg yu-text-normal">PC Web works</p>
            <?php 
				$args = array(
				    // 控制只显示10篇文章，如果将10改成-1将显示所有文章
				    'showposts' => 6,
				    'post_type' => 'art_web'
				);
				query_posts($args);
            ?>
            <?php while ( have_posts() ) : the_post(); ?>
	          	<div class="am-u-md-4 am-padding-0 am-u-end">
			        <div class="list  am-padding am-margin-horizontal-xs am-margin-bottom-xl">
			        	<div class="img_info">
			        		<a href="<?php the_permalink(); ?>" class="img_link">
			        			<?php
			        				if(has_post_thumbnail()){ 
			        					echo the_post_thumbnail('post-thumbnail-464-200');
			        				} else {
			        					echo '<img src="'.get_template_directory_uri().'/assets/imgs/tem_logo.jpg">';
			        				}
			        			?>
			        		</a>
		        			<a href="<?php $out_link = get_post_meta($post->ID, "out_link",true);if($out_link){echo $out_link;}else{the_permalink();}?>" class="out_link am-btn am-btn-primary am-icon-external-link" target="_blank"></a>
			        	</div>
		        		<h4 class="list_title am-margin-0 am-text-lg yu-text-normal am-margin-bottom-0"><?php the_title(); ?></h4>
		        		<div class="list_describe am-text-sm"><?php the_excerpt();?></div>
		        		<p class="list_info am-margin-0 am-padding-top-xs am-text-right">
		        			<span class="am-padding-right-sm"><i class="am-text-primary am-padding-right-xs am-icon-user"></i><?php the_author(); ?></span>
		        			<span class="am-padding-right-sm"><i class="am-text-primary am-padding-right-xs am-icon-calendar"></i><?php the_date('Y-m-d'); ?></span>
		        			<span class="am-padding-right-sm"><i class="am-text-primary am-padding-right-xs am-icon-eye"></i><?php get_post_views($post -> ID); ?>次</span>
		        		</p>
			        </div>
	          	</div>
            <?php endwhile; ?>
			<div class="am-cf"></div>
		</div>
	</div>

	<div class="part4 am-padding-vertical-xl">
		<div class="am-g am-g-fixed">
			<h3 class="title am-text-center am-text-xl am-margin-bottom-0 yu-text-normal">H5作品</h3>
			<p class="title am-margin-top-0 am-margin-bottom-lg am-text-center am-text-lg yu-text-normal">HTML5 works</p>
            <?php 
				$args = array(
				    // 控制只显示10篇文章，如果将10改成-1将显示所有文章
				    'showposts' => 8,
				    'post_type' => 'art_mobile'
				);
				query_posts($args);
            ?>
            <?php while ( have_posts() ) : the_post(); ?>
	          	<div class="am-u-md-3 am-padding-0 am-u-end">
			        <div class="list  am-padding am-margin-horizontal-xs am-margin-bottom-xl">
			        	<div class="img_info">
			        		<a href="<?php the_permalink(); ?>" class="img_link mobile_list_a" data-outlink='<?php  $out_link=get_post_meta($post->ID, "out_link",true); if($out_link){echo $out_link;}else{ the_permalink(); } ?>'>
			        			<?php
			        				if(has_post_thumbnail()){ 
			        					echo the_post_thumbnail('post-thumbnail-208-332');
			        				} else {
			        					echo '<img src="'.get_template_directory_uri().'/assets/imgs/tem_logo.jpg">';
			        				}
			        			?>
			        			<div class="code_box"><p class="code"></p></div>
			        		</a>
			        	</div>
		        		<h4 class="list_title am-margin-0 am-text yu-text-normal am-margin-bottom-0"><?php the_title(); ?></h4>
		        		<div class="list_describe am-text-xs am-padding-vertical-xs am-margin-vertical-xs"><?php $feature = get_post_meta($post->ID, "feature",true); if($feature){echo $feature;}else {echo the_excerpt();} ?></div>
		        		<p class="list_info am-text-xs am-margin-0 am-padding-top-xs">
		        			<span class=""><i class="am-text-primary am-padding-right-xs am-icon-user"></i><?php the_author(); ?></span>
		        			<span class="am-fr"><i class="am-text-primary am-padding-right-xs am-icon-calendar"></i><?php $creat_time = get_post_meta($post->ID, "creat_time",true); if($creat_time){echo $creat_time;}else {echo the_date('Y-m-d');} ?></span>
		        		</p>
			        </div>
	          	</div>
            <?php endwhile; ?>
			<div class="am-cf"></div>
		</div>
	</div>

	<div class="part5 am-padding-vertical-xl">
		<div class="am-g am-g-fixed">
			<h3 class="title am-text-center am-text-xl am-margin-bottom-0 yu-text-normal">前端分享</h3>
			<p class="title am-margin-top-0 am-margin-bottom-lg am-text-center am-text-lg yu-text-normal">Front end sharing</p>
            <?php 
				$args = array(
				    // 控制只显示10篇文章，如果将10改成-1将显示所有文章
				    'showposts' => 6,
				    'post_type' => 'art_share'
				);
				query_posts($args);
            ?>
            <?php while ( have_posts() ) : the_post(); ?>
	          	<div class="am-u-md-6 am-padding-0 am-u-end">
			        <div class="list am-padding am-margin-bottom-xl">
			        	<div class="am-u-md-5 am-padding-0">
			        		<a href="<?php the_permalink(); ?>" class="img_link">
			        			<?php
			        				if(has_post_thumbnail()){ 
			        					echo the_post_thumbnail('post-thumbnail-190-130');
			        				} else {
			        					echo '<img src="'.get_template_directory_uri().'/assets/imgs/tem_logo.jpg">';
			        				}
			        			?>
			        		</a>
			        	</div>
			        	<div class="right_info am-u-md-7 am-padding-left-sm am-padding-right-0">
			        		<h4 class="list_title am-text-lg yu-text-normal am-margin-bottom-sm"><?php the_title(); ?></h4>
			        		<div class="list_describe am-text-sm"><?php the_excerpt();?></div>
			        		<p class="list_info am-margin-0 am-padding-top-xs am-text-xs am-text-right">
			        			<span class="am-padding-right-sm"><i class="am-text-primary am-padding-right-xs am-icon-user"></i><?php the_author(); ?></span>
			        			<span class="am-padding-right-sm"><i class="am-text-primary am-padding-right-xs am-icon-calendar"></i><?php the_date('Y-m-d'); ?></span>
			        			<span class="am-padding-right-sm"><i class="am-text-primary am-padding-right-xs am-icon-eye"></i><?php get_post_views($post -> ID); ?>次</span>
			        		</p>
			        		<a href="<?php $out_link = get_post_meta($post->ID, "out_link",true);if($out_link){echo $out_link;}else{the_permalink();}?>" class="out_link am-btn am-btn-primary am-icon-external-link" target="_blank"></a>
			        	</div>
			        	<div class="am-cf"></div>
			        </div>
	          	</div>
            <?php endwhile; ?>
			<div class="am-cf"></div>
		</div>
	</div>
	<div class="part6 am-padding-vertical-xl">
		<div class="am-g am-g-fixed">
			<h3 class="title am-text-center am-text-xl am-margin-bottom-0 yu-text-normal">前端实验室</h3>
			<p class="title am-margin-top-0 am-margin-bottom-lg am-text-center am-text-lg yu-text-normal">Front end Laboratory</p>
            <?php 
				$args = array(
				    // 控制只显示10篇文章，如果将10改成-1将显示所有文章
				    'showposts' => 5,
				    'post_type' => 'art_lab'
				);
				query_posts($args);
            ?>
            <?php while ( have_posts() ) : the_post(); ?>
	          	<div class="am-u-md-8 am-u-md-centered am-padding-0 am-u-end">
			        <div class="list am-padding am-margin-bottom-xl">
			        	<div class="am-u-md-4 am-padding-0">
			        		<a href="<?php the_permalink(); ?>" class="img_link">
			        			<?php
			        				if(has_post_thumbnail()){ 
			        					echo the_post_thumbnail('post-thumbnail-190-130');
			        				} else {
			        					echo '<img src="'.get_template_directory_uri().'/assets/imgs/tem_logo.jpg">';
			        				}
			        			?>
			        		</a>
			        	</div>
			        	<div class="right_info am-u-md-8 am-padding-left-sm am-padding-right-0">
			        		<h4 class="list_title am-text-lg yu-text-normal am-margin-bottom-sm"><?php the_title(); ?></h4>
			        		<div class="list_describe am-text-sm"><?php the_excerpt();?></div>
			        		<p class="list_info am-margin-0 am-padding-top-xs am-text-xs am-text-right">
			        			<span class="am-padding-right-sm"><i class="am-text-primary am-padding-right-xs am-icon-user"></i><?php the_author(); ?></span>
			        			<span class="am-padding-right-sm"><i class="am-text-primary am-padding-right-xs am-icon-calendar"></i><?php the_date('Y-m-d'); ?></span>
			        			<span class="am-padding-right-sm"><i class="am-text-primary am-padding-right-xs am-icon-eye"></i><?php get_post_views($post -> ID); ?>次</span>
			        		</p>
			        		<a href="<?php $out_link = get_post_meta($post->ID, "out_link",true);if($out_link){echo $out_link;}else{the_permalink();}?>" class="out_link am-btn am-btn-primary am-icon-external-link" target="_blank"></a>
			        	</div>
			        	<div class="am-cf"></div>
			        </div>
	          	</div>
            <?php endwhile; ?>
			<div class="am-cf"></div>
		</div>
	</div>

	<!-- 联系我 -->
	<div class="contact am-padding-vertical-xl">
	  <div class="am-g am-g-fixed">
	    <div class="am-u-md-8 am-u-sm-centered">
	      <h3 class="am-margin-bottom-xl am-text-center"><img src="<?php echo get_template_directory_uri(); ?>/assets/imgs/content_title.png"></h3>  
	      <div class="am-form am-g">
		    <div class="am-u-md-6 am-form-group am-form-icon am-form-feedback">
		      <label class="am-form-label yu-text-normal"><span class="am-text-danger">*</span>姓名：</label>
		      <input type="tel" id="user_name" class="am-form-field" placeholder="姓名">
		    </div>
	        <div class="am-u-md-6 am-form-group am-form-icon am-form-feedback">
	          <label class="am-form-label yu-text-normal"><span class="am-text-danger">*</span>联系电话：</label>
	          <input type="tel" id="phone" maxlength="11" class="am-form-field" placeholder="电话">
	        </div>
	        <div class="am-u-md-6 am-form-group am-form-icon am-form-feedback">
	          <label class="am-form-label yu-text-normal">电子邮箱：</label>
	          <input type="email" id="email" class="am-form-field" placeholder="邮箱">
	        </div>
	        <div class="am-u-md-6 am-form-group am-form-icon am-form-feedback">
	          <label class="am-form-label yu-text-normal">微信号：</label>
	          <input type="text" id="wechat" class="am-form-field" placeholder="微信">
	        </div>
	        <div class="am-u-md-12 am-form-group am-form-icon am-form-feedback">
	          <label class="am-form-label yu-text-normal">留言饭：</label>
	          <textarea type="text" id="message" rows="5" class="am-form-field" placeholder="你需要反馈的问题"></textarea>
	        </div>
	        <div class="am-form-group am-u-md-12">
	          <p class="am-fl am-margin-bottom-0">SEND FOR CYER——</p>
	          <button class="am-btn am-fr am-btn-primary" id="submitBtn">提交</button>
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
</div>
<!-- 首页内容结束 -->
<?php get_footer(); ?>